<template>
  <div>
    <el-col id="articleCard" :span="8" style="width: 100%">
      <div v-for="(item, index) in tableData" :key="item.article.id">
        <el-card shadow="hover">
          <div class="block">
            <table>
              <tr>
                <td>
                  <div class="demo-image">
                    <!-- <span style="" class="demonstration"></span> -->
                    <el-image
                      style="width: 250px; height: 250px"
                      :src="`${item.imgPath}`"
                    ></el-image>
                  </div>
                </td>
                <td
                  @click="
                    getArticleKey(index, item.article.id);
                    toArticleDetails();
                  "
                  style="width: 100%; text-align: center; vertical-align: top"
                >
                  <el-link target="_blank">
                    <!-- 文章标题 -->
                    <div id="articleTitle">{{ item.article.title }}</div>
                  </el-link>
                  <div id="details" style="text-align: left">
                    <span
                      style="
                        margin-left: 30px;
                        word-break: break-all;
                        word-wrap: break-word;
                      "
                    >
                      <!-- 文章内容 -->
                      {{ item.article.articleDetails }}
                    </span>
                  </div>
                </td>
              </tr>
            </table>

            <div id="crossline">
              <!-- 浏览量 -->
              <span style="text-align: right; float: right; margin-left: 10px">
                <el-button type="text" disabled>
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-browse"></use>
                  </svg>
                  {{ item.viewsCount }}</el-button
                >
              </span>
              <!-- 评论 -->
              <span style="text-align: right; float: right; margin-left: 10px">
                <el-button type="text">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-comments"></use>
                  </svg>
                  {{ item.commentCount }}</el-button
                >
              </span>
              <!-- 点赞 -->
              <span style="text-align: right; float: right; margin-left: 10px">
                <el-button
                  :id="`${item.article.id}`"
                  @click="dianzan(item.article.id, index)"
                  type="text"
                >
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-good"></use>
                  </svg>
                  {{ item.count }}</el-button
                >
              </span>
              <!-- 时间 -->
              <el-divider content-position="right">{{
                item.article.createdTime
              }}</el-divider>
            </div>
          </div>
        </el-card>
      </div>
    </el-col>
  </div>
</template>

<script>
import { getList, GetLikeCount, PostLikeMsg, GetViews } from "../../api/index";
// import { getList } from "../../api/index";

// let likeStatus = 0;
export default {
  props: {
    CommentRecommend: [],
    ViewsRecommend: [],
    AdminRecommend:[]
  },
  watch: {
    CommentRecommend: {
      handler: function(newValue, oldValue) {
        if (newValue && oldValue) {
          this.fetchData();
        }
      },
      deep: true,
    },
    ViewsRecommend: {
      handler: function (newValue, oldValue) {
        // console.log(oldValue)
        // console.log(newValue)
        if (newValue && oldValue) {
          this.fetchData();
        }
      },
      deep: true,
    },
    articleQueryData: {
      handler: function(newValue, oldValue) {
        console.log(newValue, oldValue);
        if (newValue && oldValue) {
          this.fetchData(newValue);
        }
      },
    },
  },
  data() {
    return {
      // 缩略图demo
      tableData: [],
      list: [],
      num: 1,
      sum: 1,
      likeCountData: "",

      // 浏览量demo
      browse: "9940",

      // 评论数demo
      comment: "500",

      // 发布日期demo
      publishDate: "2021-07-31",
      // >>>>>>> bc64de1078bbd27459d5d1c2785757ac7aa7bcff
    };
  },
  methods: {
    dianzan(id, index) {
      let dianzan = document.getElementById(id);
      var userid = localStorage.getItem("userId");

      var a = {
        UserId: parseInt(userid),
        ArticleId: id,
      };
      PostLikeMsg(a)
        .then(({ data }) => {
          var res = data.data;
          console.log(res);
          if (res) {
            this.tableData[index].count += 1;
            dianzan.style.color = "#409EFF";
            console.log("已点赞");
            console.log("点赞数：", this.like);
          } else {
            this.tableData[index].count -= 1;
            dianzan.style.color = "black";
            console.log("取消点赞");
            console.log("取消后点赞数：", this.like);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    fetchData(isQuery) {
      if (isQuery) {
        GetLikeCount()
          .then((likeCountData) => {
            this.likeCountData = likeCountData.data.data;
            var likeRes = likeCountData.data.data;

            //查询信息
            var res = isQuery;
            res.forEach((e) => {
              e.imgPath =
                "http://localhost:5000/" +
                e.imgPath.slice(e.imgPath.indexOf("files") + 6);

              this.CommentRecommend.forEach((item) => {
                if (e.article.id === item.id) {
                  e.commentCount = item.CommentCount;
                }
                if (!e.commentCount) {
                  e.commentCount = 0;
                }
              });

              this.ViewsRecommend.forEach((item) => {
                if (e.article.id === item.id) {
                  e.viewsCount = item.viewsCount;
                }
                if (!e.viewsCount) {
                  e.viewsCount = 0;
                }
              });

              likeRes.forEach((x) => {
                if (e.article.id === x.articleId) {
                  e.count = x.count;
                }
                if (!e.count) {
                  e.count = 0;
                }
              });
            });

            this.tableData = res;
          })
          .catch((err) => {
            console.log(err);
          });
        //获取浏览量表
        GetViews()
          .then(() => {
            // console.log(data.data.data);
          })
          .catch((err) => {
            console.log(err);
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        //点赞信息
        GetLikeCount()
          .then((likeCountData) => {
            // console.log(likeCountData.data.data);
            this.likeCountData = likeCountData.data.data;
            var likeRes = likeCountData.data.data;
            //列表信息
            getList()
              .then((listData) => {
                var res = listData.data.data;
                // console.log(res);
                res.forEach((e) => {
                  e.imgPath =
                    "http://localhost:5000/" +
                    e.imgPath.slice(e.imgPath.indexOf("files") + 6);

                  // console.log(this.CommentRecommend);
                  this.CommentRecommend.forEach((item) => {
                    if (e.article.id === item.id) {
                      e.commentCount = item.CommentCount;
                    }
                    if (!e.commentCount) {
                      e.commentCount = 0;
                    }
                  });

                  this.ViewsRecommend.forEach((item) => {
                    // console.log(item);
                    if (e.article.id === item.id) {
                      e.viewsCount = item.viewsCount;
                    }
                    if (!e.viewsCount) {
                      e.viewsCount = 0;
                    }
                  });

                  likeRes.forEach((x) => {
                    if (e.article.id === x.articleId) {
                      e.count = x.count;
                    }
                    if (!e.count) {
                      e.count = 0;
                    }
                  });
                });
                this.tableData = res;
              })
              .catch((err) => {
                console.log(err);
              });
          })
          .catch((err) => {
            console.log(err);
          });
        //获取浏览量表
        GetViews()
          .then(() => {
            // console.log(data.data.data);
          })
          .catch((err) => {
            console.log(err);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 监听到点击的文章的索引和id
    getArticleKey(index, id) {
      this.getIndex = index;
      this.getArticleId = id;

      // console.log(this.getIndex);
      // console.log(this.getArticleId);
    },
    toArticleDetails() {
      this.$router.push({
        path: "/articledetails", //页面路径
        query: {
          getIndex: this.getIndex,
          getArticleId: this.getArticleId,
        }, // 参数传值
      });
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>

<style scoped>
#articleTitle {
  font-size: 35px;
  color: black;
}
#content {
  font-size: 20px;
  margin-top: 30px;
  text-align: left;
}
.el-card {
  width: 100%;
  min-width: 1024px;
  min-height: 300px;
  background-color: azure;
  margin-top: 10px;
}

.icon {
  width: 25px;
  height: 25px;
  vertical-align: -0.5em;
  fill: currentColor;
  overflow: hidden;
}
.el-button--text {
  color: black;
}
.block {
  text-align: left;
  /* width: 250px; */
}
</style>
